<template>
  <div>
    <ui-main>
      <template v-slot:header>
        <van-nav-bar title="项目列表" />
      </template>
      <van-search
        v-model="keyword"
        @input="onInput"
        shape="round"
        placeholder="请输入搜索关键词"
      />

      <ui-pull
        @load="getProjects"
        v-model="projects"
        :total.sync="total"
        ref="pull"
      >
        <div>
          <ui-card
            v-for="project in projects"
            @click.native="
              pageopen(project.id, project.projectName, project.remindNum)
            "
            :key="project.id"
          >
            <template v-slot:title>
              {{ project.projectName
              }}<van-tag round type="danger">{{ project.remindNum }}</van-tag>
            </template>
            <div class="pre-line">
              {{ project.projectDescribe }}
            </div>
          </ui-card>
        </div>
      </ui-pull>

      <ui-page ref="page">
        <template v-slot:header>
          <van-nav-bar
            :title="projectName"
            left-arrow
            @click-left="pageclose"
          />
        </template>
        <div>
          <!-- 这里为路由命名的原因是ui-main有一个默认子路由为了避免路由渲染多个就指定这个命名的路由进行渲染 -->
          <router-view :key="projectID" name="pageview" />
        </div>
        <template v-slot:footer>
          <van-tabbar v-model="active">
            <van-tabbar-item
              :to="{ name: 'info', params: { id: projectID } }"
              icon="column"
              >基本信息</van-tabbar-item
            >
            <van-tabbar-item
              :to="{ name: 'remind', params: { id: projectID } }"
              icon="info"
              :info="remindNum"
              >履约提醒</van-tabbar-item
            >
            <van-tabbar-item
              :to="{ name: 'record', params: { id: projectID } }"
              icon="todo-list"
              >项目记录</van-tabbar-item
            >
          </van-tabbar>
        </template>
      </ui-page>
    </ui-main>
  </div>
</template>

<script>
import { listProjects } from "@api";
import _ from "lodash";

export default {
  data() {
    return {
      keyword: "",
      remindNum: 0,
      projectName: "",
      projectID: "",
      active: 0,
      projects: [],
      total: 15,
      nextpage: 0
    };
  },
  watch: {
    projects() {
      this.total = this.projects.length + 1;
    }
  },
  methods: {
    onInput(str) {
      listProjects(this.keyword).then(res => {
        this.projects = res.data;
        this.nextpage = 1;
      });
    },
    getProjects({ isDownScrolling }) {
      if (isDownScrolling) {
        listProjects(this.keyword).then(res => {
          this.projects = res.data;
          this.nextpage = 1;
          this.$refs.pull.endSuccess();
        });
      } else {
        listProjects(this.keyword, this.nextpage).then(res => {
          if (_.isArray(res.data) && !_.isEmpty(res.data)) {
            this.nextpage++;
            this.projects = this.projects.concat(res.data);
          } else {
            this.total = this.projects.length;
          }
          this.$refs.pull.endSuccess();
        });
      }
    },
    pageclose() {
      this.$refs.page.close();
      this.$router.push("/project");
    },
    pageopen(id, name, num) {
      this.remindNum = num;
      this.active = 0;
      this.projectName = name;
      this.$refs.page.open();
      this.$router.push({ name: "info", params: { id: id } });
      this.projectID = id;
    }
  }
};
</script>
<style lang="scss" scoped>
.van-tag {
  float: right;
}
</style>
